<template>
  <div>
    <PageList>
      <template #header>
        <div style="width: 100%; overflow: hidden;">
          <div style="float: left;">人脸识别设置</div>
        </div>
      </template>
      <template #filter>
        <el-form ref="RefForm" :model="formData" :rules="formRules" label-width="140px" status-icon>
          <el-form-item class="wid" label="IP地址" prop="ip">
            <el-input v-model="formData.ip" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid" label="端口" prop="port">
            <el-input v-model="formData.port" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid" label="密码" prop="pass">
            <el-input v-model="formData.pass" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid" label="拍照回调接口">
            <el-input v-model="formData.imgRegCallBack" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid" label="人脸识别回调接口">
            <el-input v-model="formData.identifyCallBack" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid">
            <el-button type="primary" :loading="loadingSubmit" @click="handleSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { faceDetect } from '@/api/api'
  import { eleValidator } from '@/utils/tools'
  export default {
    mixins: [listMixin],
    data() {
      return {
        id: null,
        loadingSubmit: false,
        // 当前设备序列号
        serialCode: 'S587SWE5DSWD',
        formData: {
          ip: '', // ip地址
          port: '', // 端口
          pass: '', // 密码
          imgRegCallBack: '', // 拍照回调接口
          identifyCallBack: '' // 人脸识别回调接口
        },
        formRules: {
          ip: [
            { required: true, message: '请输入', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: 'ip地址不能为空' },
                { rule: 'isIp', msg: '格式错误' }
              ]), trigger: 'blur'
            }
          ],
          port: [
            { required: true, message: '请输入', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '端口不能为空' },
                { rule: 'isNumber', msg: '只能输入数字' }
              ]), trigger: 'blur'
            }
          ],
          pass: [
            { required: true, message: '请输入', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '密码不能为空' },
                { rule: 'isNumber', msg: '密码只能输入数字' }
              ]), trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 请求数据
      async getData() {
        try {
          let { data } = await faceDetect('get', null)
          this.id = data.id
          this.formData = {
            ip: data.ip, // ip地址
            port: data.port, // 端口
            pass: data.pass, // 密码
            id: data.id,
            imgRegCallBack: data.imgRegCallBack, // 拍照回调接口
            identifyCallBack: data.identifyCallBack // 人脸识别回调接口
          }
        } catch (err) {
          console.log(err)
        }
      },
      async reqFromData() {
        try {
          let res = await faceDetect('put', this.formData)
          if (res.code === 200) {
            this.$message.success('设置成功！')
          }
        } catch (err) {
          if (err.response) {
            this.$message.error(err.response.data.message)
            return
          }
          this.$message.error('设置失败！')
        }
        this.loadingSubmit = false
      },
      // 保存设置
      handleSubmit() {
        this.loadingSubmit = true
        // 验证表单
        this.$refs.RefForm.validate((valid) => {
          if (valid) {
            this.reqFromData()
          } else {
            this.loadingSubmit = false
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .wid {
    width: 300px;
  }
</style>
